<template>
  <div class="publicpageview">
    <div :class="!isSearch ? 'publicformview-new' : 'publicformview-new-gaoji'">
      <el-form
        :inline="true"
        :model="listQuery"
        size="mini"
        ref="searchForm"
      >
        <div :class="!isSearch ? 'publicformview-new-left' : 'publicformview-new-left-gaoji'">

          <el-form-item
            label="合同编号："
            prop="status"
            label-width="100px"
          >
            <el-input
              v-model="listQuery.ContractID"
              style="width: 170px;"
            ></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div :class="!isSearch ? 'publicformview-new-right' : 'publicformview-new-right-gaoji'">
        <el-button
          size="mini"
          type="primary"
					@click="cxSubmit"
        >查询</el-button>
        <el-button
          size="mini"
          @click="retunres"
        >重置</el-button>
       <!-- <el-button
          size="mini"
          type="primary"
          @click="isSearch = !isSearch"
        >{{!isSearch?'高级搜索':'关闭搜索'}}</el-button> -->
      </div>
    </div>

    <div class="publitableview">
      <div class="tab1-demo-topTab">
        <scrollable-tabs
          :tabs="tabs"
          :max-visible-tabs="4"
          v-model="activeTab"
          @tab-click="handleTabClick"
        >
          <!-- 自定义标签内容 -->
          <template v-slot:tab="{ tab, index }">
            <div class="custom-tab">
              {{ tab.name }}
            </div>
          </template>
        </scrollable-tabs>
        <div class="tab1-demo-topTab-btn">
          <el-button
            type="primary"
            size="mini"
            @click="handleAddUser('登记')"
          >收缴登记</el-button>
        </div>
      </div>
      <div v-if="activeTab == 0">

        <el-table
          v-loading="listLoading"
          :data="list"
          border
          fit
          highlight-current-row
          size="mini"
        >
					
					<el-table-column
					  align="center"
					  label="id"
					  prop="id"
					>
					</el-table-column>
          <el-table-column
            align="center"
            label="关联id"
            prop="opId"
          >
          </el-table-column>

          <el-table-column
            align="center"
            label="发生日期"
            prop="collectdate"
          >
					<template slot-scope="scope">
						{{scope.row.collectdate?scope.row.collectdate.split(' ')[0]:''}}
					</template>
          </el-table-column>

          <el-table-column
            align="center"
            label="年份"
            prop="classyear"
          >
          </el-table-column>

          <el-table-column
            align="center"
            label="金额"
            prop="collect"
          >
          </el-table-column>

          <el-table-column
            align="center"
            label="用户科目"
            prop="classnew"
          >
          </el-table-column>

          <el-table-column
            align="center"
            label="合同号"
            prop="contractID"
          >
          </el-table-column>
          <el-table-column
            align="center"
            label="组号"
            prop="collectgroup"
          >
          </el-table-column>
          <el-table-column
            align="center"
            label="摘要"
            prop="collectmemo1"
          >
          </el-table-column>
          <el-table-column
            align="center"
            label="管理形式"
            prop="manageway"
          >
          </el-table-column>
          <el-table-column
            align="center"
            label="收费员"
            prop="operator"
          >
          </el-table-column>
          <el-table-column
            align="center"
            label="缴租方式"
            prop="collecttype"
          >
          </el-table-column>
          <el-table-column
            align="center"
            label="剩余租金"
            prop="remainingcollect"
          >
					<template slot-scope="scope">
						{{scope.row.classnew=='实收'?0:scope.row.remainingcollect}}
					</template>
          </el-table-column>

          <el-table-column
            align="center"
            label="操作"
            width="240"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                @click="handleAddUser('修改',scope.row)"
              >修改</el-button>
              <el-button
                type="text"
                size="mini"
                @click="handleDel(scope.row.id)"
              >删除</el-button>
              <el-button
								v-if="scope.row.classnew!='实收'"
                type="text"
                size="mini"
                @click="shoujiaoAddUser('收缴',scope.row)"
              >收缴</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="publicpaginationview">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="listQuery.pageNum"
            background
            :page-sizes="[10, 20, 50, 100]"
            :page-size="listQuery.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            small
          ></el-pagination>
        </div>
      </div>
      <div v-if="activeTab == 1">

        <el-table
          v-if="activeTab == 1"
          v-loading="qianzuListLoading"
          :data="qianzuList"
          border
          fit
          highlight-current-row
          size="mini"
        >
          <el-table-column
            align="center"
            label="承租人"
            prop="renter"
          >
          </el-table-column>

          <el-table-column
            align="center"
            label="合同号"
            prop="contractID"
          >
          </el-table-column>

          <el-table-column
            align="center"
            label="欠租天数"
            prop="days"
          >
          </el-table-column>

          <el-table-column
            align="center"
            label="欠租金额"
            prop="remainingcollect"
          >
          </el-table-column>

          <el-table-column
            align="center"
            label="起始日期"
            prop="startTime"
          >
          </el-table-column>

          <el-table-column
            align="center"
            label="还款日期"
            prop="repaymentData"
          >
          </el-table-column>

          <el-table-column
            align="center"
            label="缴租方式"
            prop="repaymentType"
          >
          </el-table-column>

          <!-- <el-table-column
            align="center"
            label="操作"
            width="240"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                @click="quxiao(scope.row)"
              >匹配核销</el-button>
              <el-button
                type="text"
                size="mini"
                @click="handleAddUser('修改',scope)"
              >修改</el-button>
              <el-button
                type="text"
                size="mini"
                @click="handleDel"
              >删除</el-button>
            </template>
          </el-table-column> -->
        </el-table>
        <div class="publicpaginationview">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="listQuery.pageNum"
            background
            :page-sizes="[10, 20, 50, 100]"
            :page-size="listQuery.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            small
          ></el-pagination>
        </div>
      </div>

    </div>

    <el-dialog
      :title="dialogName"
      :visible.sync="shenheVisible"
      width="50%"
      :before-close="handleClose"
      style="margin-top: 0px;"
    >
      <el-form
        :model="shenheQuery"
        ref="dataForm"
        class="demo-ruleForm"
        label-position="right"
        label-width="160px"
      >

        <div style="color: blueviolet;font-weight: bold;margin-left: 20px;margin-bottom:20px">承租合同信息</div>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item
              label="合同号："
              prop="contractid"
            >
							<div style="display: flex;">
								<el-input v-model="shenheQuery.contractid"></el-input>
							<el-tooltip class="item" effect="dark" content="输入“合同号”，回车，自动调入界面中间的各输入框。其中，“代扣”不要了" placement="top">
								<i class="el-icon-warning" style="margin-left:5px"></i>
							</el-tooltip>
								<el-button style="margin-left: 5px;" size="mini" type="primary" @click="createcID">查询</el-button>
							</div>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item
              label="承租人："
              prop="renter"
            >
              <el-input disabled v-model="shenheQuery.renter"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item
              label="承租日期开始："
              prop="startrentdate"
            >
              <el-date-picker
								class="pickers"
								 disabled
                v-model="shenheQuery.startrentdate"
                type="date"
                placeholder="年/月/日"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="10">
            <el-form-item
              label="承租日期结束："
              prop="AName"
            >
              <el-date-picker
							 disabled
                v-model="shenheQuery.stopyearmonth"
                type="date"
                placeholder="年/月/日"
              >
              </el-date-picker>
            </el-form-item>
          </el-col> -->
        </el-row><el-row :gutter="20">
          <el-col :span="10">
            <el-form-item
              label="所号："
              prop="blockno"
            >
              <el-input disabled v-model="shenheQuery.blockno"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item
              label="地址："
              prop="address"
            >
              <el-input disabled v-model="shenheQuery.address"></el-input>
            </el-form-item>
          </el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="10">
						  <el-form-item
						    label="预收结存："
						    prop="deposit"
						  >
						    <el-input disabled v-model="shenheQuery.deposit"></el-input>
						  </el-form-item>
						</el-col>
					  <el-col :span="10">
					    <el-form-item
					      label="其他结存："
					      prop="otherdeposit"
					    >
					      <el-input disabled v-model="shenheQuery.otherdeposit"></el-input>
					    </el-form-item>
					  </el-col>
					</el-row>
					<el-row :gutter="20">
					  <el-col :span="10">
					    <el-form-item
					      label="往年旧欠："
					      prop="oldown"
					    >
					      <el-input disabled v-model="shenheQuery.oldown"></el-input>
					    </el-form-item>
					  </el-col>
					  <el-col :span="10">
					    <el-form-item
					      label="当年结欠："
					      prop="currentown"
					    >
					      <el-input disabled v-model="shenheQuery.currentown"></el-input>
					    </el-form-item>
					  </el-col>
					</el-row>
					<el-row :gutter="20">
					  <el-col :span="10">
					    <el-form-item
					      label="月实应收："
					      prop="realrent"
					    >
					      <el-input disabled v-model="shenheQuery.realrent"></el-input>
					    </el-form-item>
					  </el-col>
					  <el-col :span="10">
					    <el-form-item
					      label="性质："
					      prop="ownway"
					    >
					      <el-input disabled v-model="shenheQuery.ownway"></el-input>
					    </el-form-item>
					  </el-col>
					</el-row>
        </el-row>

      </el-form>

      <el-form
        :model="dengjiQuery"
        ref="dengjiForm"
        class="demo-ruleForm"
        label-position="right"
        label-width="160px"
				 :rules='rules'
      >

        <div style="color: blueviolet;font-weight: bold;margin-left: 20px;margin-bottom:20px">缴费信息</div>
        <el-row :gutter="20">
          <el-col :span="10">
						
						<el-form-item
						  label="发生日期："
						  prop="collectdate"
						>
						  <el-date-picker
								class="pickers"
						    v-model="dengjiQuery.collectdate"
						    type="date"
						    placeholder="年/月/日"
						  >
							<el-tooltip class="item" effect="dark" content="“发生日期 = 当前机器时间" placement="top">
								<i class="el-icon-warning" style="margin-left:5px"></i>
							</el-tooltip>
						  </el-date-picker>
						</el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item
              label="年份："
              prop="classyear"
            >
              <el-select
                v-model="dengjiQuery.classyear"
                style="width: 70%"
								@change="nianfenChange"
              >
                <div v-for="(item,index) in nianfenList" :key="index">
                	<el-option :label="item.classmid" :value="item.classmid" :key="index"></el-option>
                </div>
              </el-select>
							<el-tooltip class="item" effect="dark" content="“当年、往年、跨年、其他" placement="top">
								<i class="el-icon-warning" style="margin-left:5px"></i>
							</el-tooltip>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item
              label="金额："
              prop="collect"
            >
              <el-input v-model="dengjiQuery.collect"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item
              label="用户科目："
              prop="classnew"
            >
              <el-select
                v-model="dengjiQuery.classnew"
                style="width: 70%"
              >
                <div v-for="(item,index) in yonghukemuList" :key="index">
                	<el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
                </div>
              </el-select>
							<el-tooltip class="item" effect="dark" content="“根据“年份”的不同，变化相应的值" placement="top">
								<i class="el-icon-warning" style="margin-left:5px"></i>
							</el-tooltip>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item
              label="缴租方式："
              prop="collecttype"
            >
                <el-select
                  v-model="dengjiQuery.collecttype"
                  style="width: 100%"
                >
                  <div v-for="(item,index) in jiaozufangshiList" :key="index">
                  	<el-option :label="item.classmid" :value="item.classmid" :key="index"></el-option>
                  </div>
                </el-select>
            </el-form-item>
          </el-col>
					<!-- <el-col :span="10">
					  <el-form-item
					    label="关联ID："
					    prop="opId"
					  >
					    <el-input v-model="dengjiQuery.opId"></el-input>
					  </el-form-item>
					</el-col> -->
          <el-col :span="10">
            <el-form-item
              label="组号："
              prop="collectgroup"
            >
              <el-input v-model="dengjiQuery.collectgroup"></el-input>
            </el-form-item>
          </el-col>
					
					  <el-col :span="10">
					    <el-form-item
					      label="摘要："
					      prop="collectmemo1"
					    >
					      <el-input v-model="dengjiQuery.collectmemo1"></el-input>
					    </el-form-item>
					  </el-col>
						<el-col :span="10">
							<el-form-item label="月份：" prop="mouthCount">
								<el-select v-model="dengjiQuery.mouthCount">
									<el-option label="1个月" value="1" :key="1"></el-option>
									<el-option label="2个月" value="2" :key="2"></el-option>
									<el-option label="3个月" value="3" :key="3"></el-option>
									<el-option label="4个月" value="4" :key="4"></el-option>
									<el-option label="5个月" value="5" :key="5"></el-option>
									<el-option label="6个月" value="6" :key="6"></el-option>
									<el-option label="7个月" value="7" :key="7"></el-option>
									<el-option label="8个月" value="8" :key="8"></el-option>
									<el-option label="9个月" value="9" :key="9"></el-option>
									<el-option label="10个月" value="10" :key="10"></el-option>
									<el-option label="11个月" value="11" :key="11"></el-option>
									<el-option label="12个月" value="12" :key="12"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
        </el-row>
      </el-form>

      <div class="saveContent">
       <!-- <el-button
          type="primary"
          @click="yinhangxinxi = true"
          size="medium"
        >查看1号-10号银行信息</el-button> -->
        <el-button
          type="primary"
          @click="save"
          size="medium"
        >保 存</el-button>
      </div>

      <el-dialog
        title="查看1-10号银行信息"
        append-to-body
        :visible.sync="yinhangxinxi"
        width="50%"
        :before-close="handleClose"
        style="margin-top: 50px;"
      >
        <el-table
          v-loading="listLoading"
          :data="list"
          border
          fit
          highlight-current-row
          size="mini"
        >
          <el-table-column
            align="center"
            label="银行名字"
            prop="userId"
          >
          </el-table-column>

          <el-table-column
            align="center"
            label="日期"
            prop="userName"
          >
          </el-table-column>

          <el-table-column
            align="center"
            label="银行信息"
            prop="userId"
          >
          </el-table-column>
        </el-table>

        <div class="publicpaginationview">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="listQuery.pageNum"
            background
            :page-sizes="[10, 20, 50, 100]"
            :page-size="listQuery.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            small
          ></el-pagination>
        </div>
        <div class="saveContent">
          <el-button
            type="primary"
            @click="yinhangxinxi = false"
            size="medium"
          >返回</el-button>
        </div>
      </el-dialog>

    </el-dialog>

    <el-dialog
      title="匹配核销"
      :visible.sync="quxiaoPopup"
      width="50%"
      :before-close="handleClose"
      style="margin-top: 0px;"
    >
      <el-form
        :model="formData"
        ref="dataForm"
        class="demo-ruleForm"
        label-position="right"
        label-width="160px"
      >
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item
              label="发生日期："
              prop="AName"
            >
              <el-date-picker
                v-model="listQuery.time"
                type="date"
                placeholder="年/月/日"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item
              label="年份："
              prop="AName"
            >
              <el-select
                v-model="listQuery.time"
                style="width: 100%"
              >
                <div v-for="(item,index) in nianfenList" :key="index">
                	<el-option :label="item.classmid" :value="item.classmid" :key="index"></el-option>
                </div>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item
              label="金额："
              prop="AName"
            >
              <el-input v-model="listQuery.AName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item
              label="核销金额："
              prop="AName"
            >
              <el-input v-model="listQuery.AName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-form-item
            label="核销日期："
            prop="AName"
          >
            <el-date-picker
              v-model="listQuery.time"
              type="date"
              placeholder="年/月/日"
            >
            </el-date-picker>
          </el-form-item>
          </el-col>
        </el-row>

      </el-form>

      <div style="color: blueviolet;font-weight: bold;margin-left: 20px;margin-bottom:20px">本次收缴信息</div>
      <el-table
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        size="mini"
      >
        <el-table-column
          align="center"
          label="账期"
          prop="userId"
        >
        </el-table-column>

        <el-table-column
          align="center"
          label="租凭天数"
          prop="userName"
        >
        </el-table-column>

        <el-table-column
          align="center"
          label="租凭金额"
          prop="userId"
        >
        </el-table-column>
      </el-table>

      <div class="saveContent">
        <el-button
          v-if="type==3"
          type="primary"
          @click="quxiaoPopup = false"
          size="medium"
        >返回</el-button>
        <el-button
          v-else
          type="primary"
          @click="quxiaoPopup = false"
          size="medium"
        >保 存</el-button>
      </div>

    </el-dialog>
		
		
		
		
		
		<el-dialog
		  :title="dialogName"
		  :visible.sync="NewshenheVisible"
		  width="50%"
		  :before-close="handleClose"
		  style="margin-top: 0px;"
		>
		  <el-form
		    :model="shenheQuery"
		    ref="dataForm"
		    class="demo-ruleForm"
		    label-position="right"
		    label-width="160px"
		  >
		
		    <div style="color: blueviolet;font-weight: bold;margin-left: 20px;margin-bottom:20px">承租合同信息</div>
		    <el-row :gutter="20">
		      <el-col :span="10">
		        <el-form-item
		          label="合同号："
		          prop="contractid"
		        >
							<div style="display: flex;">
								<el-input v-model="shenheQuery.contractid"></el-input>
								<el-button style="margin-left: 5px;" size="mini" type="primary" @click="createcID">查询</el-button>
							</div>
		        </el-form-item>
		      </el-col>
		      <el-col :span="10">
		        <el-form-item
		          label="承租人："
		          prop="renter"
		        >
		          <el-input disabled v-model="shenheQuery.renter"></el-input>
		        </el-form-item>
		      </el-col>
		    </el-row>
		    <el-row :gutter="20">
		      <el-col :span="10">
		        <el-form-item
		          label="承租日期开始："
		          prop="startrentdate"
		        >
		          <el-date-picker
								class="pickers"
								 disabled
		            v-model="shenheQuery.startrentdate"
		            type="date"
		            placeholder="年/月/日"
		          >
		          </el-date-picker>
		        </el-form-item>
		      </el-col>
		      <!-- <el-col :span="10">
		        <el-form-item
		          label="承租日期结束："
		          prop="AName"
		        >
		          <el-date-picker
							 disabled
		            v-model="shenheQuery.stopyearmonth"
		            type="date"
		            placeholder="年/月/日"
		          >
		          </el-date-picker>
		        </el-form-item>
		      </el-col> -->
		    </el-row><el-row :gutter="20">
		      <el-col :span="10">
		        <el-form-item
		          label="所号："
		          prop="blockno"
		        >
		          <el-input disabled v-model="shenheQuery.blockno"></el-input>
		        </el-form-item>
		      </el-col>
		      <el-col :span="10">
		        <el-form-item
		          label="地址："
		          prop="address"
		        >
		          <el-input disabled v-model="shenheQuery.address"></el-input>
		        </el-form-item>
		      </el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="10">
						  <el-form-item
						    label="预收结存："
						    prop="deposit"
						  >
						    <el-input disabled v-model="shenheQuery.deposit"></el-input>
						  </el-form-item>
						</el-col>
					  <el-col :span="10">
					    <el-form-item
					      label="其他结存："
					      prop="otherdeposit"
					    >
					      <el-input disabled v-model="shenheQuery.otherdeposit"></el-input>
					    </el-form-item>
					  </el-col>
					</el-row>
					<el-row :gutter="20">
					  <el-col :span="10">
					    <el-form-item
					      label="往年旧欠："
					      prop="oldown"
					    >
					      <el-input disabled v-model="shenheQuery.oldown"></el-input>
					    </el-form-item>
					  </el-col>
					  <el-col :span="10">
					    <el-form-item
					      label="当年结欠："
					      prop="currentown"
					    >
					      <el-input disabled v-model="shenheQuery.currentown"></el-input>
					    </el-form-item>
					  </el-col>
					</el-row>
					<el-row :gutter="20">
					  <el-col :span="10">
					    <el-form-item
					      label="月实应收："
					      prop="realrent"
					    >
					      <el-input disabled v-model="shenheQuery.realrent"></el-input>
					    </el-form-item>
					  </el-col>
					  <el-col :span="10">
					    <el-form-item
					      label="性质："
					      prop="ownway"
					    >
					      <el-input disabled v-model="shenheQuery.ownway"></el-input>
					    </el-form-item>
					  </el-col>
					</el-row>
		    </el-row>
		
		  </el-form>
		
		  <el-form
		    :model="dengjiQuery"
		    ref="dengjiForm"
		    class="demo-ruleForm"
		    label-position="right"
		    label-width="160px"
				 :rules='rules'
		  >
		
		    <div style="color: blueviolet;font-weight: bold;margin-left: 20px;margin-bottom:20px">缴费信息</div>
		    <el-row :gutter="20">
		      <el-col :span="10">
						
						<el-form-item
						  label="发生日期："
						  prop="collectdate"
						>
						  <el-date-picker
								class="pickers"
						    v-model="dengjiQuery.collectdate"
						    type="date"
						    placeholder="年/月/日"
						  >
						  </el-date-picker>
						</el-form-item>
		      </el-col>
		      <el-col :span="10">
		        <el-form-item
		          label="年份："
		          prop="classyear"
		        >
		          <el-select
		            v-model="dengjiQuery.classyear"
		            style="width: 100%"
								@change="nianfenChange"
		          >
		            <div v-for="(item,index) in nianfenList" :key="index">
		            	<el-option :label="item.classmid" :value="item.classmid" :key="index"></el-option>
		            </div>
		          </el-select>
		        </el-form-item>
		      </el-col>
		    </el-row>
		    <el-row :gutter="20">
		      <el-col :span="10">
		        <el-form-item
		          label="金额："
		          prop="collect"
		        >
		          <el-input v-model="dengjiQuery.collect"></el-input>
		        </el-form-item>
		      </el-col>
		      <el-col :span="10">
		        <el-form-item
		          label="用户科目："
		          prop="classnew"
		        >
		          <el-select
		            v-model="dengjiQuery.classnew"
		            style="width: 100%"
		          >
		            <div v-for="(item,index) in yonghukemuList" :key="index">
		            	<el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
		            </div>
		          </el-select>
		        </el-form-item>
		      </el-col>
		    </el-row>
		    <el-row :gutter="20">
		      <el-col :span="10">
		        <el-form-item
		          label="缴租方式："
		          prop="collecttype"
		        >
		            <el-select
		              v-model="dengjiQuery.collecttype"
		              style="width: 100%"
		            >
		              <div v-for="(item,index) in jiaozufangshiList" :key="index">
		              	<el-option :label="item.classmid" :value="item.classmid" :key="index"></el-option>
		              </div>
		            </el-select>
		        </el-form-item>
		      </el-col>
					<!-- <el-col :span="10">
					  <el-form-item
					    label="关联ID："
					    prop="opId"
					  >
					    <el-input v-model="dengjiQuery.opId"></el-input>
					  </el-form-item>
					</el-col> -->
		      <el-col :span="10">
		        <el-form-item
		          label="组号："
		          prop="collectgroup"
		        >
		          <el-input v-model="dengjiQuery.collectgroup"></el-input>
		        </el-form-item>
		      </el-col>
					
					  <el-col :span="10">
					    <el-form-item
					      label="摘要："
					      prop="collectmemo1"
					    >
					      <el-input v-model="dengjiQuery.collectmemo1"></el-input>
					    </el-form-item>
					  </el-col>
		    </el-row>
		  </el-form>
		
		  <div class="saveContent">
		    <el-button
		      type="primary"
		      @click="Newsave"
		      size="medium"
		    >保 存</el-button>
		  </div>
		
		</el-dialog>
  </div>
</template>

<script>
	import dayjs from 'dayjs'
import {
	renterCollectList,
	addRenterCollect,
	getRent,
	updRenterCollect,
	delRenterCollect,
	arrearsPage
} from '@/api/management'
import ScrollableTabs from '@/components/ScrollableTabs.vue'
export default {
  name: 'managementjinghuguanli',
  components: {
    ScrollableTabs
  },
  data() {
    return {
      tabs: [{ name: '收缴记录' }, { name: '欠租记录' }],
      // tabs: [{ name: '收缴记录' }],
      activeTab: 0,
      listQuery: {
					pageNum: 1,
					pageSize: 20,
					CollectType:'',
					ContractID:'',
					renter:'',
					blockno:''
      },
      total: 0,
      list: [],
      qianzuList: [ ],
      qianzuListLoading: false,
      listLoading: false,
      dialogVisible: false,
      formData: {
				
			},
      shenheQuery: {
				renter:'',
				contractid:'',
				startrentdate:'',
				stopyearmonth:'',
				blockno:'',
				address:'',
				deposit:'',
				otherdeposit:'',
				oldown:'',
				currentown:'',
				ownway:'',
				realrent:'',
				opId:0
			},
			dengjiQuery:{
				collectdate:'',
				classyear:'',
				collect:"",
				classnew:'',
				collecttype:'',
				collectgroup:'',
				collectmemo1:'',
				renterid:'',
				operator:'',
				contractID:'',
				mouthCount:'',
				opId:0
			},
			rules: {
				collectdate: [{
					required: true,
					message: '请选择发生日期',
					trigger: 'blur'
				}],
				classyear: [{
					required: true,
					message: '请选择年份',
					trigger: 'blur'
				}],
				collect: [{
					required: true,
					message: '请输入金额',
					trigger: 'blur'
				}],
				classnew: [{
					required: true,
					message: '请选择用户科目',
					trigger: 'blur'
				}],
				collecttype: [{
					required: true,
					message: '请选择缴租方式',
					trigger: 'blur'
				}]
			},
      shenheVisible: false,
      type: '',
      isSearch: false,
      dialogName: '',
      quxiaoPopup: false,
      yinhangxinxi: false,
			chanyeList:[],
			nianfenList:[],
			jiaozufangshiList:[],
			yonghukemuList:[],
			NewshenheVisible:false
			
    }
  },
	watch: {
		'dengjiQuery.collectdate': {
			handler(newVal, oldVal) {
				console.log(newVal, oldVal)
			}
		}
	},
  computed: {
  },

  mounted() {
		console.log(this.dengjiQuery)
		if(this.$route.query.contractid){
			this.listQuery.ContractID = this.$route.query.contractid
			this.getList()
		}else{
			
			this.getList()
		}
		// 遍历字典
		this.chanyeList = JSON.parse(localStorage.getItem('jinying'))
		this.chanyeList.forEach((item,index)=>{
			if(item.classname == '年份'){
				this.nianfenList = item.classmidList
			}else if(item.classname == '缴租方式'){
				this.jiaozufangshiList = item.classmidList
			}
		})
  },

  methods: {
		cxSubmit(){
			if(this.activeTab==0){
				this.getList()
			}else{
				this.arrearsPage()
			}
			
		},
		retunres(){
			this.listQuery.pageNum=1,
			this.listQuery.pageSize= 20,
			this.listQuery.CollectType='',
			this.listQuery.ContractID='',
			this.listQuery.renter='',
			this.listQuery.blockno=''
		},
		createcID(){
			if(this.shenheQuery.contractid){
				let data = {
					cid:this.shenheQuery.contractid
				}
				getRent(data).then(res=>{
					console.log(res)
					this.shenheQuery.renter = res.data.renter
					this.shenheQuery.contractid = res.data.contractid
					this.shenheQuery.startrentdate = res.data.startrentdate
					this.shenheQuery.stopyearmonth = res.data.stopyearmonth
					this.shenheQuery.blockno = res.data.block.blockno
					this.shenheQuery.address = res.data.block.address
					this.shenheQuery.renterid = res.data.renterid
					this.shenheQuery.deposit=res.data.deposit,
					this.shenheQuery.otherdeposit=res.data.otherdeposit,
					this.shenheQuery.oldown=res.data.oldown,
					this.shenheQuery.currentown=res.data.currentown,
					this.shenheQuery.ownway=res.data.ownway,
					this.shenheQuery.realrent=res.data.realrent
				})
			}else{
				this.$message({
				  type: 'success',
				  message: '请输入合同号!'
				})
			}
			
		},
		nianfenChange(e){
			console.log(e)
			this.nianfenList.forEach((item,index)=>{
				if(e == item.classmid){
					this.yonghukemuList = item.classdetailList
				}
			})
		},
    shenheButton(type) {
      this.shenheName = type
    },
    handleSizeChange(val) {
    	this.listQuery.pageNum = 1
    	this.listQuery.pageSize = val
			if(this.activeTab==0){
				this.getList()
			}else{
				this.arrearsPage()
			}
    },
		handleCurrentChange(val) {
			this.listQuery.pageNum = val
			if(this.activeTab==0){
				this.getList()
			}else{
				this.arrearsPage()
			}
		},
    getList() {
      renterCollectList(this.listQuery).then((response) => {
        this.total = response.data.total
        this.list = response.data.list
      })
    },
		save(){
			if(this.shenheQuery.contractid){
				this.$refs.dengjiForm.validate((valid) => {
					if (valid) {
						let data = this.dengjiQuery
						data.operator = localStorage.getItem('username')
						data.collectdate = dayjs(this.dengjiQuery.collectdate).format('YYYY-MM')
						data.contractID = this.shenheQuery.contractid
						data.renterid = this.shenheQuery.renterid 
						
						if(this.dengjiQuery.classnew == '实收'){
							if(this.dialogName == '租金收缴登记'){
								addRenterCollect(data).then(res=>{
									this.$message({
										type: 'success',
										message: '操作成功!'
									})
									this.getList()
									this.shenheVisible = false
									this.returns()
								})
							}else{
								updRenterCollect(data).then(res=>{
									this.$message({
										type: 'success',
										message: '操作成功!'
									})
									this.getList()
									this.shenheVisible = false
									this.returns()
								})
							}
						}else{
							if(this.dialogName == '租金收缴登记'){
								addRenterCollect(data).then(res=>{
									this.$message({
										type: 'success',
										message: '操作成功!'
									})
									this.getList()
									this.shenheVisible = false
									this.returns()
								})
							}else{
								updRenterCollect(data).then(res=>{
									this.$message({
										type: 'success',
										message: '操作成功!'
									})
									this.getList()
									this.shenheVisible = false
									this.returns()
								})
							}
						}
					} else {
						console.log('验证失败！')
						return false
					}
				})
			}else{
				this.$message({
					type: 'success',
					message: '请查询合同号!'
				})
			}
			
		
		},
    resetForm(val) {
      console.log('1')
      this.$refs[val].resetFields()
    },

    handleAddUser(name,row) {
      if (name == '登记') {
        this.dialogName = '租金收缴登记'
				this.dengjiQuery.collectdate = dayjs().format('YYYY-MM-DD')
				this.shenheQuery.startrentdate = dayjs().format('YYYY-MM-DD')
				console.log(this.dengjiQuery.collectdate )
      } else if (name == '修改') {
        this.dialogName = '租金收缴修改'
				console.log(row)
				this.dengjiQuery = row
				this.shenheQuery.contractid = row.contractID
				this.createcID()
      }
      this.shenheVisible = true
    },
		shoujiaoAddUser(name,row){
			this.NewshenheVisible = true
			let dengjiQuery = JSON.stringify(row)
				this.dengjiQuery = JSON.parse(dengjiQuery)
				this.dengjiQuery.opId = row.id
				this.dengjiQuery.classyear = '当年'
				this.dengjiQuery.classnew = '实收'
			this.shenheQuery.contractid = row.contractID
			this.createcID()
		},
		Newsave(){
			if(this.shenheQuery.contractid){
				this.$refs.dengjiForm.validate((valid) => {
					if (valid) {
						let data = this.dengjiQuery
						data.operator = localStorage.getItem('username')
						data.collectdate = dayjs(this.dengjiQuery.collectdate).format('YYYY-MM')
						data.contractID = this.shenheQuery.contractid
						data.renterid = this.shenheQuery.renterid 
						
						addRenterCollect(data).then(res=>{
							this.$message({
								type: 'success',
								message: '操作成功!'
							})
							this.getList()
							this.NewshenheVisible = false
							this.returns()
						})
					} else {
						console.log('验证失败！')
						return false
					}
				})
			}else{
				this.$message({
					type: 'success',
					message: '请查询合同号!'
				})
			}
		},
    quxiao() {
      this.quxiaoPopup = true
    },
    handleUpdate(currentData) {
      //   一定要在打开弹窗前 再赋值 不然resetFiles没用
      this.dialogVisible = true
      this.$nextTick(() => {
        this.formData = {
          ...currentData
        }
      })
    },
    // 提交
    handleTijiao() {
      this.$confirm(
        '此操作将冻结该条建账下的剩余账期，请确认是否继续操作？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          this.$message({
            type: 'success',
            message: '提交成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消提交'
          })
        })
    },
    // 提交
    handleDel(id) {
      this.$confirm('此操作将删除这条数据，请确认是否继续操作？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
					let data = {
						id:id
					}
					delRenterCollect(data).then(res=>{
							this.$message({
								type: 'success',
								message: '操作成功!'
							})
							this.getList()
					})
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
						this.returns()
        })
        .catch((_) => {})
    },
    handleTabClick(index) {
      this.activeTab = index
			console.log(index)
			if(index==0){
				this.getList()
			}else{
				this.arrearsPage()
			}
    },
		arrearsPage(){
			arrearsPage(this.listQuery).then((response) => {
			  this.total = response.data.total
			  this.qianzuList = response.data.list
			})
		},
		returns(){
			this.dengjiQuery = {}
			this.shenheQuery.renter = ''
			this.shenheQuery.contractid = ''
			this.shenheQuery.startrentdate = ''
			this.shenheQuery.stopyearmonth = ''
			this.shenheQuery.blockno = ''
			this.shenheQuery.address = ''
			this.shenheQuery.renterid = ''
			this.shenheQuery.deposit='',
			this.shenheQuery.otherdeposit='',
			this.shenheQuery.oldown='',
			this.shenheQuery.currentown='',
			this.shenheQuery.ownway='',
			this.shenheQuery.realrent='',
			this.shenheQuery.opId = 0,
			this.dengjiQuery.opId = 0
		}
  }
}
</script>
<style scoped>
.tianjiaButton {
  border: 2px solid #008c93;
  background-color: #fff;
  color: #008c93;
}

.xinxi {
  display: flex;
  width: 800px;
}

.goufangContent {
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  background-color: #f7f7f7;
}

.tabButton {
  background: #eff2f7;
  color: #333333;
  border: none;
}

.saveContent {
  width: 100%;
  display: flex;
  justify-content: end;
  margin-top: 20px;
  padding-bottom: 20px;
}

/deep/.el-input__inner {
  height: 30px !important;
  line-height: 30px !important;
}

/deep/.el-form-item__label {
  height: 30px !important;
}

/deep/.el-date-editor {
  width: 160px !important;
}
.tab1-demo-topTab {
  position: relative;
}
.tab1-demo-topTab-btn {
  position: absolute;
  top: 5px;
  right: 10px;
}
/deep/.pickers{
	width: 200px;
}
</style>